<template>
  <div>
    <div v-if="platformList.length">
      <div 
        :style="{background: `url(${bgUrl}) no-repeat`, 'background-size': '100% 100%'}"
      >
        <div 
          class="block-box platform-box h-503 padlr320"
        >
            <div class="block-tit pad-t60">平台优势</div>
            <div class="platform-list flex ju-bt">
              <div 
                class="platform-li w-305 h-280 flex-col flex-center pad20 mar-t53"
                v-for="(item,index) in platformList"
                :key="index"
              >
                <div class="li-img">
                  <el-image
                    style="width: 180px;height: 180px"
                    :src="item.img"
                  />
                </div>
                <div class="li-tit mar-t23">{{ item.title }}</div>
                <div class="li-tips mar-t16">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
// 平台优势
import { ref } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const props = defineProps({
  service_id: {
      type: String,
      default: ""
  },
  parentType: {
    type: String,
    default: "child"
  },
  bgUrl: {
    type: String,
     default: ""
  }
})
let platformList = ref([
  {
    tit: "成功率高",
    img: "platform-img",
    tips: "平台自有商标大数据帮助客户检测，专家级顾问人工比对大大降低风险"
  },
  {
    tit: "进度监控",
    img: "platform-img",
    tips: "商标注册的过程中可随时查看进度并由代理人在平台内提醒让您放心、安心"
  },
  {
    tit: "全程托管",
    img: "platform-img",
    tips: "提供一站式服务，您提交资料后所有繁杂事宜由顾问负责"
  },
  {
    tit: "高性价比",
    img: "platform-img",
    tips: "官网价格明码标价，无隐形收费 价格公道，性价比高"
  },
])
const getServiceAdvantage = () => { 
  serviceApi.serviceAdvantage({
    service_id: props.service_id
  }).then(res => { 
    platformList.value = res.data
  })
}
const getTypeServiceAdvantage = () => { 
  serviceApi.typeServiceAdvantage({
    service_type_id: props.service_id,
  }).then(res => { 
    platformList.value = res.data
  })
}

if (props.parentType == "tos") {
  getTypeServiceAdvantage();
} else { 
  getServiceAdvantage();
}
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
    text-align: center;
}
.platform-list {
  .platform-li {
    background: linear-gradient(180deg,#eaf2fd, #ffffff);
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
    position: relative;
    .li-img {
      margin-top: -90px;
    }
    .li-tit {
      font-size: 24px;
      font-weight: bold;
      text-align: left;
      color: #202020;
    }
    .li-tips {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: center;
      color: #575966;
      line-height: 22px;
    }
  }
}
</style>
